<.settings_tiles>
  <.tile
    docs="stats-api"
    current_role={@current_team_role}
    current_team={@current_team}
    feature_mod={Plausible.Billing.Feature.StatsAPI}
  >
    <:title>
      <a id="api-keys">API keys</a>
    </:title>
    <:subtitle>
      Create and manage access.
    </:subtitle>

    <.filter_bar filtering_enabled?={false}>
      <.button_link mt?={false} href={Routes.settings_path(@conn, :new_api_key)}>
        New API Key
      </.button_link>
    </.filter_bar>

    <p :if={Enum.empty?(@api_keys)} class="mb-8 text-center text-sm">
      No API keys configured yet.
    </p>

    <.table rows={@api_keys}>
      <:thead>
        <.th>
          Name
        </.th>
        <.th hide_on_mobile>
          Key
        </.th>
        <.th :if={ee?()} hide_on_mobile>
          Type
        </.th>
        <.th invisible>
          Actions
        </.th>
      </:thead>

      <:tbody :let={api_key}>
        <.td truncate max_width="max-w-40">
          {api_key.name}
        </.td>
        <.td hide_on_mobile>
          {api_key.key_prefix}
          {String.duplicate("*", 32 - 6)}
        </.td>
        <.td :if={ee?()}>
          <span :if={api_key.type == "stats_api"}>Stats API</span>
          <span :if={api_key.type == "sites_api"}>Sites API</span>
        </.td>
        <.td actions>
          <.delete_button
            method="delete"
            href={Routes.settings_path(@conn, :delete_api_key, api_key.id)}
            data-confirm="Are you sure you want to revoke this key? This action cannot be reversed."
          />
        </.td>
      </:tbody>
    </.table>
  </.tile>
</.settings_tiles>
